<template>
	<view class="page">
		<tpf-nav-bar ref="tpfNavBar" status-bar fixed hasCenter :fixedHeight="tpfNavBar.fixedHeight" :left="tpfNavBar.left" :center="tpfNavBar.center" :right="tpfNavBar.right" @iconTap="tpfNavBarIconTap" :style="'background-color:'+tpfNavBar.backgroundColor" @getNavBarMaxHeight="getNavBarMaxHeight"></tpf-nav-bar>
		<view class="tpf-pay-order-container">
			<view class="tpf-order-amount">
				<text class="tpf-order-amount-label">订单金额</text>
				<view class="tpf-order-amount-price"><tpl-price :price="12.8"></tpl-price></view>
			</view>
			
			<view class="tpf-order-tip-wrap">
				<view class="tpf-order-tip"><text class="tpf-order-tip-label">订单号：</text><text class="tpf-order-number">SN202015485452</text></view>
				<view class="tpf-order-tip-msg"><text>你的订单号创建成功，请在</text> <text class="tpf-order-tip-time">17:59</text> <text>前完成支付，否则系统将自动取消订单。当前剩余时间</text><text class="tpf-order-pay-residue-time">{{leftTime}}</text></view>
			</view>
			
			<view class="tpf-order-pay-way-wrap">
				<view class="tpf-order-pay-title">选择支付方式</view>
				<view class="tpf-order-pay-way-item flex flex-align-center flex-pack-justify" v-for="(icon,iconIndex) of payListConfig.iconList" :key="iconIndex" @tap="selectPay(icon.id)">
					<tpf-icon :fontFamily="payListConfig.fontFamily" :text="icon.text" :textStyle="icon.selectStyle" :title="icon.title" :vertical="false" :titleStyle="payListConfig.titleStyle"></tpf-icon>
					<tpf-icon v-if="icon.selected" :fontFamily="payListConfig.fontFamily" :text="payListConfig.selectIcon.text" :textStyle="payListConfig.selectIcon.textStyle"></tpf-icon>
				</view>
				<view class="tpf-order-pay-button" :class="{'tpf-order-pay-button-disabled':orderPayStstus}" @tap="goPay">{{payText}}</view>
			</view> 
		</view>
	</view>
</template>

<script>
import config from '@/mixins/shop/pay-order/pay-order.js'
export default{
	mixins:[config],
	data(){
		return {
			list:{
				time:1592481058,
				limitTime:30
			},
			payWay:"",
			payText:"立即支付",
			leftTime:"00:00",
			Timer:null
		}
	},
	onLoad() {
		if(this.orderPayStstus){
			this.payText = "订单已超时";
			return false;
		}
		this.Timer = setInterval(()=>{
			this.countDown(this.list.time,this.list.limitTime);
		},1000);
	},
	computed:{
		orderPayStstus(){
			return (Date.parse(new Date())/1000 - this.list.time - this.list.limitTime*60) > 0;
		}
	},
	methods:{
		tpfNavBarIconTap(e) {
			const action = {
				back() {
					uni.navigateBack();
				},
				search() {
					console.log('点击了搜索按钮');
				}
			}
			action[e]();
		},
		getNavBarMaxHeight(e){
			this.navBarHeight = e;
		},
		selectPay(type){
			
			this.payListConfig.iconList.forEach((icon,iconIndex)=>{
				this.$set(this.payListConfig.iconList[iconIndex],"selected",icon.id == type?true:false);
			});
			
			this.payWay = type;
		},
		goPay(){
			if(this.payWay.length==0){
				this.$Helper.tpfToast({title:"请选择支付方式"});return false;
			}
		},
		/* *
		* limit 限时30分钟
		 */
		countDown(time,limit=30){
			let currentTimeStamp = Date.parse(new Date())/1000;
			if((currentTimeStamp - time - limit*60)>0){
				// 已超时
				this.leftTime = "00:00";
				this.payText = "订单已超时";
				clearInterval(this.Timer);
			}else{
				let minutes = this.extTime(Math.floor((time + limit*60 - currentTimeStamp)/60));
				let seconds = this.extTime((time + limit*60 - currentTimeStamp)%60);
				this.leftTime = minutes+":"+seconds;
			}
		},
		extTime(number){
			return number<10?"0"+number:number;
		}
	}
	
}
</script>

<style lang="scss">
.tpf-pay-order-container{
	
}
.tpf-order-amount{
	padding: $uni-spacing-col-lg;
	background-color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom:$uni-spacing-col-lg ;
}
.tpf-order-amount-label{
	font-size: $uni-font-size-base;
}
.tpf-order-tip-wrap{
	padding: $uni-spacing-col-lg;
	background-color: #FFFFFF;
	font-size: $uni-font-size-base;
	margin-bottom:$uni-spacing-col-lg;
}
.tpf-order-pay-way-wrap{
	padding: $uni-spacing-col-lg;
	background-color: #FFFFFF;
}
.tpf-order-amount-price{
	display: flex;
}
.tpf-order-pay-title{
	margin-bottom:$uni-spacing-col-base;
}
.tpf-order-pay-way-item{
	border-bottom-color: #dfdfdf;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	padding: $uni-spacing-col-base;
}
.tpf-order-pay-button{
	line-height:90rpx;
	background-color: #fe8d15;
	color:#FFF;
	font-size: $uni-font-size-base;
	text-align: center;
	margin-top: $uni-spacing-col-base;
	
}
.tpf-order-pay-button-disabled{
	background-color: #afafaf;
}
.tpf-order-number{
	color: #F0AD4E;
}
.tpf-order-tip-msg{
	margin-top: 20rpx;
	vertical-align: middle;
}
.tpf-order-tip-time{
	color: #F00;
	padding: 0 10rpx;
}
.tpf-order-pay-residue-time{
	color: #FF0000;
	font-size: $uni-font-size-base*1.2;
}
</style>
